<template>
  <n-page-header subtitle="详情" @back="backPage">
    <n-button type="primary" @click="goDetailPage"> 去base-detail页面 </n-button>
    <n-space :size="24" align="center">
      <n-badge :value="value" :max="15">
        <n-avatar />
      </n-badge>
      <n-badge :value="value" dot>
        <n-avatar />
      </n-badge>
      <n-button-group>
        <n-button @click="value = Math.min(16, value + 1)">
          <template #icon>
            <n-icon><MdAdd /></n-icon>
          </template>
        </n-button>
        <n-button @click="value = Math.max(0, value - 1)">
          <template #icon>
            <n-icon><MdRemove /></n-icon>
          </template>
        </n-button>
      </n-button-group>
    </n-space>
  </n-page-header>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { MdAdd, MdRemove } from '@vicons/ionicons4';

defineOptions({
  name: 'detail'
});

const router = useRouter();
const goDetailPage = () => {
  router.push('/base_detail');
};
const backPage = () => {
  router.back();
};

const value = ref(0);
</script>

<style scoped lang="less"></style>
